<template>
	<view>
		<!-- <u-modal v-model="show" :show-cancel-button="true" :mask-custom-style="maskCustomStyle" confirm-text="同意" :confirm-style="confirmStyle" :cancel-style="cancelStyle" cancel-text="不同意"
				title="温馨提示" :title-style="titleStyle" @cancel="cancel" @confirm="confirm"
			>
			<view class="u-update-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal> -->
		<view class="body">
			<view class="title">
				<text class="u-font-36">温馨提示</text>
			</view>
			<view class="content">
				<p>欢迎您使用闪酿！</p>
				<br>
				<p>请充分阅读<text class="theme-color" @click="toPage('00000000-0000-0000-0000-000000000002', '用户协议')">《用户协议》</text>和<text class="theme-color" @click="toPage('00000000-0000-0000-0000-000000000004', '隐私政策')">《隐私政策》</text>，点“同意并继续”代表您己同意前述协议及下列约定：为了给您提供服务,我们会申请系统权限收集设备及个人信息;</p>
				<p>闪酿将严格保守您的个人信息，确保信息安全。您在点击"同意并继续"前,务必审慎阅读,充分理解协议条款内容。</p>
			</view>
			<view class="footer">
				<u-button shape="circle" style="width: 100%;margin-right: 20rpx;" hover-class="none" :hair-line="false" :ripple="true" @click="cancel">不同意</u-button>
				<u-button shape="circle" style="width: 100%;margin-left: 20rpx;" hover-class="none" :hair-line="false" :ripple="true" :custom-style="getBtStyle()"  @click="confirm">同意</u-button>
			</view>
		</view>
		<!-- 点击不同意二级弹窗 -->
		<u-modal v-model="cancelShow" :show-cancel-button="true" title="您不想继续进行操作吗？"
			:title-style="{fontSize: '28rpx'}"
			confirm-text="继续"
			:confirm-style="{color: textColor, fontSize: '28rpx'}"
			cancel-text="退出"
			:cancel-style="{color: greyColor, fontSize: '28rpx'}"
			@confirm="confirm"
			@cancel="finalCancel">
			<view class="u-update-content u-text-center">
				<text style="color: #999999;font-size: 22rpx;">登陆注册后可享更多好物哦~</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				show: true,
				cancelShow: false,
				maskCustomStyle: {
					backgroundColor: this.themeColor,
					// background: this.linearGradient,
				},
				titleStyle: {
					fontWeight: 'bold'
				},
				cancelStyle: {
					margin: '40rpx 20rpx 40rpx 30rpx',
					width: '210rpx',
					borderRadius: '35px',
					// background: this.linearGradient,
					border: '1px solid #999999',
					color: this.greyColor,
				},
				confirmStyle: {
					margin: '40rpx 30rpx 40rpx 20rpx',
					width: '210rpx',
					borderRadius: '35px',
					backgroundColor: this.themeColor,
					color: '#FFFFFF',
				},
				// 传递给uni-app"rich-text"组件的内容，可以使用"<br>"进行换行
				content: `
					亲爱的用户，感谢您的信任与光临!在开始使用下一杯前，请您务必先阅读   
					，此外特向您说明如下： 1，为向部提供基本产品、服务，我们会源正当、合法、必要的原则收集和使用必要的信息; 2、为保障您的账户安全、向您提供更契合您需求的页面展示和搜索结果 、在您授权的前提下，我们可能为您
				`,
			}
		},
		onReady() {
			this.show = true;
		},
		computed:{
			...mapState(useUserStore, ['isAgree'])
		},
		methods: {
			cancel() {
				this.cancelShow = true
			},
			confirm() {
				// #ifdef APP-PLUS
				plus.runtime.agreePrivacy();
				// #endif
				// #ifdef H5
				this.$store.dispatch('user/agree')
				// #endif
				// this.closeModal();
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			closeModal() {
				if (this.isAgree) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			// 最终不同意
			finalCancel() {
				// #ifdef APP-PLUS
				plus.runtime.disagreePrivacy();
				// #endif
				plus.runtime.quit()
			},
			toPage(id, name) {
				this.$mRouter.push({ route: '/pages/mine/shezhi/lawDetail?id='+id+'&name='+name })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $theme-color;
	}
</style>
<style scoped lang="scss">
	.body {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 72%;
		transform: translate(-50%, -50%);
		height: 54%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 30rpx;
	}
	.title {
		height: 16%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-weight: bold;
	}
	.content {
		height: 62%;
		font-size: 28rpx;
		overflow-y: scroll;
	}
	.footer {
		height: 22%;
		// line-height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.u-update-content {
		font-size: 26rpx;
		color: $u-content-color;
		line-height: 1.7;
		padding: 30rpx;
		padding-bottom: 40rpx;
	}
</style>
